<template>
  <div class="about">
    <el-container>
      <el-header style="height: 82px;padding:0;">
        <img
          src="../assets/顶部导航.png"
          alt=""
        >
      </el-header>

      <el-container>

        <el-aside width="240px">
          <img
            src="../assets/侧边导航.png"
            alt=""
          >

        </el-aside>
        <el-main>
          <div id="title">
            <span>仓储情况统计</span>
            <el-button type="primary">查看报表</el-button>
          </div>

          <div style="display:flex">
            <div id="date">
              <span style="color: #1a7dff;">按天</span>
              <span>按月</span>
              <span>按年</span>
            </div>

            <div>
              <span class="demonstration"></span>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="height:40px;margin-right: 10px;"
              >
              </el-date-picker>
            </div>

            <el-select
              v-model="company"
              placeholder="全部公司"
              style="margin-right: 10px;"
            >
              <el-option
                v-for="item in companies"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="business"
              placeholder="全部业务"
            >
              <el-option
                v-for="item in businesses"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-button
              type="primary"
              style="margin-right:10px;height: 36px;margin-left: 20px;"
            >查询</el-button>
            <el-button
              type="primary"
              plain
              style="height: 36px;"
            >重置</el-button>
          </div>

          <div id="center">
            <div
              id="item1"
              v-for="item in itemsData"
            >
              <div class="item-title">
                <span>{{item.title}}</span>
                <div v-if="item.time"><span>!</span></div>
                <span>{{item.time}}</span>
              </div>
              <div class="item-money">
                <span>{{item.money}}</span>
                <span>{{item.unit}}</span>
              </div>

              <div
                class="item-percent"
                v-if="item.status==0"
              >
                <div style="margin-right:44px;">
                  <span>同比</span>
                  <div></div>
                  <span>{{item.Spercent}}</span>
                </div>

                <div>
                  <span>环比</span>
                  <div></div>
                  <span>{{item.Cpercent}}</span>
                </div>
              </div>

              <div
                class="area"
                v-if="item.status==1"
              >固定面积</div>

            </div>
            <!-- <div class="line"></div> -->

          </div>

          <div id="tu">
            <div
              id="fig1"
              style="width: 810px;height: 316px;background: #ffffff;border-radius: 8px;padding: 20px 10px;margin-right: 24px;box-sizing: border-box;"
            >
            </div>

            <div
              id="fig2"
              style="width: 810px;height: 316px;background: #ffffff;border-radius: 8px;padding: 20px 10px;box-sizing: border-box;"
            ></div>
          </div>

          <div id="tu2">
            <div
              id="fig3"
              style="width: 478px;height: 316px;background: #ffffff;border-radius: 8px;padding: 20px 10px;margin-right: 20px; box-sizing: border-box;"
            >
            </div>
            <div
              id="fig4"
              style="width: 1142px;height: 316px;background: #ffffff;border-radius: 8px;padding: 20px; box-sizing: border-box;"
            ></div>

            <div class="percent">
              <div>72%</div>
              <div>在营面积占比</div>
            </div>

            <div class="pieData">
              <div style="margin-bottom:30px">
                <span>总面积</span>
                <span>800</span>
                <span>㎡</span>
              </div>

              <div>
                <span style="margin-right:20px">在营面积</span>
                <span>576</span>
                <span>㎡</span>
              </div>
            </div>
          </div>

          <div id="title-bottom">
            <div></div>
            <div>各公司仓库营收情况对比</div>

            <!-- <div class="filter">
              <span>仓库筛选</span>
            </div> -->

            <el-select
              v-model="value"
              clearable
              placeholder="仓库筛选"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

          </div>

          <div
            id="fig5"
            style="width: 1640px;height: 364px;background: #ffffff;border-radius: 8px;"
          >
          </div>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      company: "",
      business: "",
      options: [
        {
          value: "选项1",
          label: "A仓库",
        },
        {
          value: "选项2",
          label: "B仓库",
        },
      ],
      companies: [
        {
          value: "选项1",
          label: "A公司",
        },
        {
          value: "选项2",
          label: "B公司",
        },
      ],
      businesses: [
        {
          value: "选项1",
          label: "A业务",
        },
        {
          value: "选项2",
          label: "B业务",
        },
      ],
      itemsData: [
        {
          title: "仓储营收",
          money: "206232",
          unit: "元",
          time: "",
          Spercent: "0.03%",
          Cpercent: "0.03%",
          status: 0,
        },
        {
          title: "固定仓营收",
          money: "36026",
          unit: "元",
          time: "",
          Spercent: "0.03%",
          Cpercent: "0.03%",
          status: 0,
        },
        {
          title: "流量仓营收",
          money: "62206",
          unit: "元",
          time: "",
          Spercent: "0.03%",
          Cpercent: "0.03%",
          status: 0,
        },
        {
          title: "仓储库存",
          money: "406",
          unit: "件",
          time: "截至 2022/7/6",
          Spercent: "0.03%",
          Cpercent: "0.03%",
          status: 0,
        },
        {
          title: "运营面积",
          money: "1000",
          unit: "㎡",
          time: "截至 今日",
          status: 1,
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
    };
  },
  methods: {
    test1() {
      return this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: "rgba(26,125,255,0.8)",
        },
        {
          offset: 1,
          color: "rgba(26,125,255,0.3)",
        },
      ]);
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById("fig1"));
      let myChart2 = this.$echarts.init(document.getElementById("fig2"));
      let myChart3 = this.$echarts.init(document.getElementById("fig3"));
      let myChart4 = this.$echarts.init(document.getElementById("fig4"));
      let myChart5 = this.$echarts.init(document.getElementById("fig5"));
      // 指定图表的配置项和数据
      myChart1.setOption({
        title: {
          text: "仓储营收情况分析",
          textStyle: {
            color: "#000000",
            fontSize: 18,
            fontFamily: "MicrosoftYaHei, MicrosoftYaHei-Bold",
            fontWeight: 700,
            lineHeight: 24,
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              '<div style="display:flex;align-items: center;height:30px">' +
              params[0].name +
              '<div style="height: 14px;font-size: 14px;color: #999999;line-height: 14px;margin-left:42px;margin-right:10px">' +
              "同比" +
              "</div>" +
              '<div style="width:0px;height:0px;border:6px solid transparent;border-top-color:#197dff;margin-top:6px">' +
              "</div>" +
              '<div style="height: 14px;font-size: 14px;color: #333333;line-height: 14px;margin-left:4px">' +
              "0.03%" +
              "</div>" +
              "</div>" +
              '<div style="display:flex;align-items: center;height:30px">' +
              '<div style="height: 24px;font-size: 24px;font-weight: 700;color: #1a7dff;line-height: 24px;">' +
              params[0].value +
              "</div>" +
              "万元" +
              '<div style="height: 14px;font-size: 14px;color: #999999;line-height: 14px;margin-left:16px;margin-right:10px">' +
              "环比" +
              "</div>" +
              '<div style="width:0px;height:0px;border:6px solid transparent;border-bottom-color:#fd7112;margin-bottom:6px">' +
              "</div>" +
              '<div style="height: 14px;font-size: 14px;color: #333333;line-height: 14px;margin-left:4px">' +
              "0.03%" +
              "</div>" +
              "</div>" +
              "</div>"
            );
          },
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ["line", "bar"] },
          },
        },
        xAxis: {
          data: [
            "7-24",
            "7-25",
            "7-26",
            "7-27",
            "7-28",
            "7-29",
            "7-30",
            "8-1",
            "8-2",
            "8-3",
            "8-4",
            "8-5",
            "8-6",
            "8-7",
          ],
        },
        yAxis: {
          name: "营收:万元",
        },
        series: [
          {
            type: "bar",
            data: [50, 28, 50, 14, 92, 42, 32, 52, 26, 16, 26, 78, 28, 42],
            barWidth: 12,
            barCategoryGap: "20%",
            itemStyle: {
              normal: {
                offset: 0,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#197dff" },
                  { offset: 1, color: "#a1caff" },
                ]),
              },
            },
          },
        ],
      });

      myChart2.setOption({
        title: {
          text: "仓储库存情况分析",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              '<div style="height:30px;font-size: 14px;text-align: left;color: #999999;line-height: 14px;">' +
              params[0].name +
              "</div>" +
              '<div style="display:flex;align-items:center;height:30px">' +
              '<div style="height: 12px;font-size: 12px;color: #999999;line-height: 12px;margin-right:72px">' +
              "库存" +
              "</div>" +
              '<div style="height: 24px;font-size: 24px;font-weight: 700;color: #197dff;line-height: 24px;">' +
              params[0].value +
              "</div>" +
              '<div style="height:12px;font-size: 12px;color: #999999;line-height: 12px;margin-left:8px">' +
              "件" +
              "</div>" +
              "</div>" +
              '<div style="display:flex;align-items:center;height:30px">' +
              '<div style="height: 12px;font-size: 12px;color: #999999;line-height: 12px;margin-right:72px">' +
              "库存" +
              "</div>" +
              '<div style="height: 24px;font-size: 24px;font-weight: 700;color: #00dcac;line-height: 24px;">' +
              params[1].value +
              "</div>" +
              '<div style="height:12px;font-size: 12px;color: #999999;line-height: 12px;margin-left:8px">' +
              "吨" +
              "</div>" +
              "</div>" +
              "</div>"
            );
          },
        },
        legend: {},
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "7-24",
              "7-25",
              "7-26",
              "7-27",
              "7-28",
              "7-29",
              "7-30",
              "8-1",
              "8-2",
              "8-3",
              "8-4",
              "8-5",
              "8-6",
              "8-7",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "重量：吨",
            min: 0,
            max: 250,
            position: "right",
          },
          {
            type: "value",
            name: "库存：件",
            min: 0,
            max: 25,
            position: "left",
          },
        ],
        series: [
          {
            name: "库存",
            type: "bar",
            yAxisIndex: 0,
            data: [
              6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3,
              39, 20,
            ],
            barWidth: 12,
            itemStyle: {
              normal: {
                offset: 0,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#197dff" },
                  { offset: 1, color: "#a1caff" },
                ]),
              },
            },
          },
          {
            name: "重量",
            type: "line",
            yAxisIndex: 1,
            symbol: "circle",
            symbolSize: 8,
            data: [
              6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0,
              5.2, 18.0, 16.5,
            ],
            itemStyle: {
              normal: {
                color: "#12cde1",
                lineStyle: {
                  color: "#12cde1",
                },
              },
            },
          },
        ],
      });

      myChart3.setOption({
        title: {
          text: "固定仓在营面积情况占比",
        },
        // color: "#197dff",
        series: [
          {
            type: "pie",

            data: [
              {
                value: 72,
                itemStyle: { color: "#197dff", borderRadius: "50%" },
              },
              { value: 40, itemStyle: { color: "#DFE3E8" } },
            ],
            radius: ["60%", "70%"],
            center: ["25%", "50%"],
          },
        ],
      });

      myChart4.setOption({
        title: {
          text: "各仓库营收情况对比",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return (
              "<div>" +
              '<div style="display:flex;align-items: center;height:30px">' +
              params[0].name +
              '<div style="height: 14px;font-size: 14px;color: #999999;line-height: 14px;margin-left:42px;margin-right:10px">' +
              "同比" +
              "</div>" +
              '<div style="width:0px;height:0px;border:6px solid transparent;border-top-color:#197dff;margin-top:6px">' +
              "</div>" +
              '<div style="height: 14px;font-size: 14px;color: #333333;line-height: 14px;margin-left:4px">' +
              "0.03%" +
              "</div>" +
              "</div>" +
              '<div style="display:flex;align-items: center;height:30px">' +
              '<div style="height: 24px;font-size: 24px;font-weight: 700;color: #1a7dff;line-height: 24px;">' +
              params[0].value +
              "</div>" +
              "万元" +
              '<div style="height: 14px;font-size: 14px;color: #999999;line-height: 14px;margin-left:16px;margin-right:10px">' +
              "环比" +
              "</div>" +
              '<div style="width:0px;height:0px;border:6px solid transparent;border-bottom-color:#fd7112;margin-bottom:6px">' +
              "</div>" +
              '<div style="height: 14px;font-size: 14px;color: #333333;line-height: 14px;margin-left:4px">' +
              "0.03%" +
              "</div>" +
              "</div>" +
              "</div>"
            );
          },
        },
        legend: {
          data: ["固定仓", "流量仓"],
          top: "5%",
          right: "4%",
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "6%",
          height: "70%",
          containLabel: true,
        },
        xAxis: {
          data: [
            "7-24",
            "7-25",
            "7-26",
            "7-27",
            "7-28",
            "7-29",
            "7-30",
            "8-1",
            "8-2",
            "8-3",
            "8-4",
            "8-5",
            "8-6",
            "8-7",
          ],
        },
        yAxis: {
          name: "营收：万元",
        },
        series: [
          {
            symbol: "circle",
            symbolSize: 8,
            //smooth: true,
            name: "固定仓",
            color: "#197dff",
            data: [18, 44, 40, 69, 19, 38, 29, 30, 65, 39, 82, 52, 40, 16],
            type: "line",
            stack: "x",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(26,125,255,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },

          {
            symbol: "circle",
            symbolSize: 8,
            name: "流量仓",
            color: "#fd7112",
            data: [52, 64, 54, 40, 58, 90, 50, 52, 32, 70, 90, 70, 92, 34],
            type: "line",
            stack: "x",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(230,97,9,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      });

      myChart5.setOption({
        legend: {
          data: ["A公司", "B公司"],
          top: "5%",
          right: "4%",
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "6%",
          height: "75%",
          containLabel: true,
        },
        xAxis: {
          data: [
            "7-24",
            "7-25",
            "7-26",
            "7-27",
            "7-28",
            "7-29",
            "7-30",
            "8-1",
            "8-2",
            "8-3",
            "8-4",
            "8-5",
            "8-6",
            "8-7",
          ],
        },
        yAxis: {
          name: "营收:万元",
        },
        series: [
          {
            symbol: "circle",
            symbolSize: 8,
            smooth: true,
            name: "A公司",
            sampling: "average",
            itemStyle: {
              color: "#197dff",
            },
            data: [18, 44, 40, 69, 19, 38, 29, 30, 65, 39, 82, 52, 40, 16],
            type: "line",
            stack: "a",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(26,125,255,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          {
            symbol: "circle",
            symbolSize: 8,
            smooth: true,
            name: "B公司",
            data: [52, 64, 54, 40, 58, 90, 50, 52, 32, 70, 90, 70, 92, 34],
            type: "line",
            stack: "a",
            itemStyle: {
              color: "#00dcac",
            },
            sampling: "average",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,220,172,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>

<style scoped>
.el-header > img {
  width: 100%;
}

.el-aside > img {
  width: 100%;
}

.el-main {
  background: #f4f5f7;
}

#title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

#title > span {
  width: 96px;
  height: 36px;
  font-size: 16px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
  font-weight: 700;
  text-align: left;
  color: #3a3f4f;
  line-height: 36px;
}

#date {
  display: flex;
  justify-content: space-around;
  width: 152px;
  height: 40px;
  background: #fafbfc;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  padding: 10px;
  margin-right: 10px;
  box-sizing: border-box;
}

#date > span {
  width: 28px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: left;
  color: #999999;
  line-height: 14px;
}

#tu {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

#tu2 {
  display: flex;
  position: relative;
}

#title-bottom {
  display: flex;
  margin-top: 30px;
  margin-bottom: 10px;
}

#title-bottom > div:first-child {
  width: 3px;
  height: 16px;
  background: #197dff;
  border-radius: 2px;
  margin-right: 8px;
  margin-top: 4px;
}

#title-bottom > div:nth-child(2) {
  width: 198px;
  height: 24px;
  font-size: 18px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
  font-weight: 700;
  line-height: 24px;
  margin-right: 10px;
}

.el-input--suffix > .el-input__inner {
  height: 36px;
  width: 122px;
}
#center {
  display: flex;
  margin-top: 20px;
  background: #ffffff;
  width: 1640px;
}
#item1 {
  width: 312px;
  height: 126px;
  background: #ffffff;
  border-radius: 8px 0px 0px 8px;
  padding: 20px;
  margin-right: 20px;
  box-sizing: border-box;
}
.item-title {
  display: flex;
  text-align: left;
  margin-bottom: 8px;
}
.item-title > span:first-child {
  height: 16px;
  font-size: 16px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  color: #626466;
  line-height: 16px;
  margin-right: 20px;
}
.item-title > div {
  width: 16px;
  height: 16px;
  background: #eeeeee;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-right: 4px;
}
.item-title > div > span {
  color: #b4b7bb;
}
.item-title > span:last-child {
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: left;
  color: #939699;
  line-height: 18px;
}
.item-money {
  text-align: left;
  margin-bottom: 16px;
}
.item-money > span:first-child {
  height: 32px;
  font-size: 32px;
  font-family: DINCond, DINCond-Bold;
  font-weight: 700;
  color: #333333;
  line-height: 32px;
  margin-right: 4px;
}
.item-money > span:last-child {
  width: 14px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  color: #999999;
  line-height: 14px;
}
.item-percent {
  display: flex;
}
.item-percent > div {
  display: flex;
}
.item-percent > div > span:nth-child(1) {
  width: 28px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: left;
  color: #999999;
  line-height: 14px;
  margin-right: 4px;
}
.item-percent > div > div {
  width: 0;
  height: 0;
  border-top: 10px solid #197dff;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-radius: 1px;
  margin-right: 3px;
  margin-top: 1.5px;
}
.item-percent > div > span:last-child {
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  color: #333333;
  line-height: 14px;
}
.line {
  width: 1px;
  height: 86px;
  border: 1px solid #eeeeee;
}
.area {
  width: 56px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: left;
  color: #999999;
  line-height: 14px;
  margin-top: 16px;
}
.pieData {
  position: absolute;
  left: 270px;
  top: 109px;
}
.pieData > div > span:nth-child(1) {
  height: 16px;
  font-size: 16px;
  text-align: right;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  color: #939699;
  line-height: 16px;
  margin-right: 36px;
}
.pieData > div > span:nth-child(2) {
  height: 32px;
  font-size: 32px;
  font-family: DINCond, DINCond-Medium;
  font-weight: 500;
  color: #626466;
  line-height: 32px;
  margin-right: 6px;
}
.pieData > div > span:nth-child(3) {
  width: 19px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  color: #999999;
  line-height: 14px;
}
.percent {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 80px;
  top: 126px;
}
.percent > div:first-child {
  height: 32px;
  font-size: 40px;
  font-family: DINCond, DINCond-Bold;
  font-weight: 700;
  text-align: center;
  color: #333333;
  line-height: 32px;
  margin-bottom: 16px;
}
.percent > div:last-child {
  width: 96px;
  height: 16px;
  font-size: 16px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: center;
  color: #939699;
  line-height: 16px;
}
.filter {
  width: 92px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 2px;
  padding: 5px 8px;
  box-sizing: border-box;
}
.filter > span:first-child {
  width: 56px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: left;
  color: #939699;
  line-height: 14px;
}
</style>